<template>

    <div class="coach-page page">
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <div class="disfx">
                    <span>首发</span>
                    <div class="coach-crumb-right">
                        <!--                        <button class="coach-blue">移除球员</button>-->
                        <button class="coach-red" @click="addqiuyuan(0)">新增球员</button>
                    </div>
                </div>
            </PlatformCrumb>
            <div class="coach-group-con">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list1"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            type="index"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="players"
                            label="球员"
                            width="150">
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img :src="scope.row.imgs|filtersImg" alt=""
                                 style="width: 36px;height: 36px;margin:1px;border:1px solage #BBBDBF;vertical-align: middle;">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="号码"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="goodLocation"
                            label="擅长位置"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="sumScoure"
                            label="综合能力"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="课程"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="groupingName"
                            label="分组"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="wound"
                            label="伤病备注"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span style="color:#C60818;">{{ scope.row.wound }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="handle"
                            width="160"
                            label="操作">
                        <template slot-scope="scope">
<!--                            <a class="look">查看详情</a>-->
                            <a style="margin-left: 20px" @click="todelete(scope.row.id,0)" class="look cur">移除球员</a>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="organ_pagination">
                    <el-pagination
                            background
                            @current-change="handleSizeChange"
                            :page-size="searchData.pageSize"
                            layout="total, prev, pager, next"
                            :total="searchData.total">
                    </el-pagination>
                </div>
            </div>
            <div class="coach-crumb">
                <div class="disfx">
                    <span>替补</span>
                    <div class="coach-crumb-right" style="margin-right: 20px">
                        <!--                        <button class="coach-blue">移除球员</button>-->
                        <button class="coach-red" @click="addqiuyuan(1)">新增球员</button>
                    </div>
                </div>
            </div>
            <div class="coach-group-con">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list2"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            type="index"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="players"
                            label="球员"
                            width="150">
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img :src="scope.row.imgs|filtersImg" alt=""
                                 style="width: 36px;height: 36px;margin:1px;border:1px solage #BBBDBF;vertical-align: middle;">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="号码"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="goodLocation"
                            label="擅长位置"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="sumScoure"
                            label="综合能力"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="课程"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="groupingName"
                            label="分组"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="wound"
                            label="伤病备注"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span style="color:#C60818;">{{ scope.row.wound }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="handle"
                            width="160"
                            label="操作">
                        <template slot-scope="scope">
<!--                            <a class="look">查看详情</a>-->
                            <a style="margin-left: 20px" @click="todelete(scope.row.id,1)" class="look cur">移除球员</a>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="organ_pagination">
                    <el-pagination
                            background
                            @current-change="handleSizeChange2"
                            :page-size="searchData2.pageSize"
                            layout="total, prev, pager, next"
                            :total="searchData2.total">
                    </el-pagination>
                </div>
            </div>

            <el-dialog title="新增球员" :visible.sync="dialog" width="80%" v-if="dialog">
                <addteam2 :types="types" @dialog="dialogfunc" @dialog2="dialogfunc2"></addteam2>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    import {mapActions, mapState, editCourse} from 'vuex'
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import addteam2 from "@/components/coach/addteam2.vue";
    import {baseImgPath, basefile} from '@/config/env.js';
    import {teachingPlanedit} from '../../api/api/coach.js';

    export default {
        components: {
            PlatformCrumb,
            addteam2
        },
        data() {
            return {
                dialog: false,
                key: "value",
                id: this.$route.query.id,
                searchData: {
                    "pageNum": 1,
                    "pageSize": 10,
                    "teamId": this.$route.query.id,
                    "type": 0,
                    "total": 0
                    // id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
                searchData2: {
                    "pageNum": 1,
                    "pageSize": 10,
                    "teamId": this.$route.query.id,
                    "type": 1,
                    "total": 0
                    // id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
                courseList: [],
                isdelete: false,
                deletedata: {
                    coachId: 0,
                    coachName: "string",
                    count: 0,
                    createTime: 1561259038000,
                    duration: 0,
                    equipment: "string",
                    id: 5,
                    imgs: "string",
                    mainPoints: "string",
                    method: "string",
                    name: "string",
                    practice: "string",
                    status: 0,
                    theme: "string",
                    time: 1561258927000,
                    updateTime: 1561912591000,
                },
                list1: [],
                list2: [],
                input: '',
                types: 0
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),

            loginDis() {
                return this.userStatus && this.userStatus.id ? true : false
            },
            back() {
                this.$router.go(-1);//返回上一层
            },
        },

        methods: {
            ...mapActions('myCourse', [
                'fetchCourseList'
            ]),
            ...mapActions('coachTraining', [
                'fetchCourseList',
                'teamgetTeamPlayerList',
                'deleteTeam',
                'teameditPlayer',
            ]),
            handleSizeChange(e) {
                this.searchData.pageNum = e
                this.getList()
            },
            addqiuyuan(type) {
                this.dialog = true
                this.types = type
            },
            dialogfunc() {
                this.dialog = false
            },
            dialogfunc2(e) {
                this.dialog = false
                if (e == 0) {
                    this.getList()
                } else {
                    this.getList2()
                }
            },
            handleSizeChange2(e) {
                this.searchData2.pageNum = e
                this.getList2()
            },
            showDelete(e) {
                this.isdelete = true
                this.deletedata = this.courseList[e]
            },
            delete_fun() {
                this.isdelete = !this.isdelete
            },
            getDelete(e) {
                var that = this;
                teachingPlanedit({
                    'status': 1,
                    'id': e,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        that.isdelete = false
                        that.getList()
                    }
                });
            },
            toDetail(id) {
                this.$router.push({path: '/coachTraining/lessonDetail', query: {id}})
            },

            addCourse() {
                this.$router.push('/coachTraining/lessonDetail')
            },

            onChange(val) {
                this.searchData.pageNum = val
                this.getList()
            },

            getList() {
                this.teamgetTeamPlayerList(this.searchData).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.list1 = list || []
                        this.searchData.total = res.data.total
                    }
                })
            },
            todelete(e, type) {
                this.teameditPlayer({ids: [e], teamId: this.id, type: type}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList()
                        this.getList2()
                    }
                })
            },
            getList2() {
                this.teamgetTeamPlayerList(this.searchData2).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.list2 = list || []
                        this.searchData2.total = res.data.total
                    }
                })
            },
        },

        created() {
            this.getList()
            this.getList2()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    }
</script>
<style scoped>
    @import url("P-coach.css");

    .cur {
        cursor: pointer;
    }

    .disfx {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;
    }

    .coach-crumb-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
